import React from "react"
import './css/Footer.css'
class Footer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex:0,
            footerList:[
                {
                    text:'首页',
                    class:'shouye'
                },
                {
                    text:'分类',
                    class:'fenlei'
                },
                {
                    text:'发现',
                    class:'faxian'
                },
                {
                    text:'购物车',
                    class:'cart'
                },
                {
                    text:'我的',
                    class:'my'
                },
            ]
        }
    }
    render() {
        return (
            <div className="footer">
                <ul className="footerList">
                    {
                        this.state.footerList.map((item,idx)=>{
                            return(
                                <li className={item.class} onClick={this.ev_clickChange.bind(this,idx)}>
                                    <span  className={this.state.currentIndex===idx ? "bg2":"bg"}></span>
                                    <span className={this.state.currentIndex===idx ? "textColor":""}>{item.text}</span>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
       
    }
    ev_clickChange(idx){
        console.log(idx)
        this.setState({
            currentIndex:idx
        })
    }
}

export default Footer;